<template>
    <div>
        <el-container>
            <el-main>
                <el-row style="margin-top: 90px" type="flex" justify="center">
                    <el-col :xs="24" :sm="10" :md="8" :lg="6" :xl="6">
                        <el-form style="border: black solid 2px;padding: 40px" :label-position="'top'"
                                 :model="loginForm" :rules="rules" ref="loginForm">
                            <el-form-item label="Username" prop="username">
                                <el-input v-model.trim="loginForm.username" prefix-icon="el-icon-pear"/>
                            </el-form-item>

                            <el-form-item label="Password" prop="password">
                                <el-input @keyup.enter.native="login('loginForm')" show-password
                                          v-model.trim="loginForm.password"
                                          prefix-icon="el-icon-lollipop"/>
                            </el-form-item>

                            <el-form-item>
                                <el-row type="flex" justify="center">
                                    <el-col :span="12" style="text-align: center">
                                        <el-button @click="dialogFormVisible = true">Regist</el-button>
                                    </el-col>
                                    <el-col :span="12" style="text-align: center">
                                        <el-button type="primary" @click="login('loginForm')">Login</el-button>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>

        <el-dialog title="Regist" :visible.sync="dialogFormVisible" :width="dialogWidth">
            <el-form :model="registForm" :rules="rules" ref="registForm">
                <el-form-item label="Username" prop="userName" :label-width="formLabelWidth">
                    <el-input v-model.trim="registForm.userName" @blur="fetchData" suffix-icon="el-icon-pear"/>
                </el-form-item>
                <el-form-item label="Password" prop="userPwd" :label-width="formLabelWidth">
                    <el-input show-password v-model.trim="registForm.userPwd"/>
                </el-form-item>
                <el-form-item label="Sex" prop="userSex" :label-width="formLabelWidth">
                    <el-select v-model="registForm.userSex" placeholder="请选择性别">
                        <el-option label="男" value="1"/>
                        <el-option label="女" value="0"/>
                        <el-option label="其他" value="2"/>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-row type="flex" class="" justify="center">
                    <el-col :span="12" style="text-align: center">
                        <el-button @click="resetForm('registForm')">重 置</el-button>
                    </el-col>
                    <el-col :span="12" style="text-align: center">
                        <el-button type="primary" @click="regist('registForm')">注 册</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogWidth: 0,
                ableRegist: false,
                loginForm: {
                    username: '',
                    password: ''
                },
                registForm: {
                    userName: '',
                    userPwd: '',
                    userSex: ''
                },
                dialogFormVisible: false,
                formLabelWidth: '90px',
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'change'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                    ],
                    userPwd: [
                        {required: true, message: '请输入密码', trigger: 'change'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    userSex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ]
                }
            };
        },
        methods: {
            login(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this;
                        axios.get('http://localhost:10010/api/item/user/login/' + _this.loginForm.username + '/' + _this.loginForm.password).then(function (resp) {
                            if (resp.data !== "") {
                                _this.successMessage("登陆成功");
                                localStorage.setItem('loginUser', JSON.stringify(resp.data))
                                _this.$router.push("/main");
                            } else {
                                _this.errorMessage("登陆失败");
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            regist(formName) {
                if (this.ableRegist) {
                    const _this = this;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            axios.post('http://localhost:10010/api/item/user/regist/', _this.registForm).then(function (resp) {
                                if (resp.data) {
                                    _this.successMessage("注册成功");
                                    axios.get('http://localhost:10010/api/search/init');
                                    _this.dialogFormVisible = false;
                                } else {
                                    _this.errorMessage("注册失败");
                                }
                            })
                        } else {
                            return false;
                        }
                    });
                } else {
                    this.errorMessage("用户名不可用")
                }

            },
            fetchData() {
                const _this = this;
                axios.get("http://localhost:10010/api/item/user/check/" + this.registForm.userName).then(function (resp) {
                    if (resp.data) {
                        _this.ableRegist = true;
                        _this.successMessage("用户名可用");
                    } else {
                        _this.ableRegist = false;
                        _this.errorMessage("用户名不可用");
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            successMessage(msg) {
                this.$message({
                    showClose: true,
                    message: 'success:' + msg,
                    type: 'success'
                });
            },
            errorMessage(msg) {
                this.$message({
                    showClose: true,
                    message: 'error:' + msg,
                    type: 'error'
                });
            },
            setDialogWidth() {
                const val = document.body.clientWidth;
                const def = 600; // 默认宽度
                if (val < def) {
                    this.dialogWidth = '100%'
                } else {
                    this.dialogWidth = def + 'px'
                }
            }
        },
        created() {
            this.setDialogWidth();
        },
        mounted() {
            window.onresize = () => {
                return (() => {
                    this.setDialogWidth()
                })()
            }
        }
    }
</script>